import React, { Component } from 'react';
import {
  StyleSheet, View, Alert, Dimensions, Image, DeviceEventEmitter, TouchableNativeFeedback,
} from 'react-native';
import { Text, Textarea } from 'native-base';
import { UtilToast } from '../../../../utils/util-method';
import Option from './acceptOptions';
import Theme from '../../../../native-base-theme/variables/commonColor';
import * as incidentServer from '../../../../services/incidentRequest';

const optionsList = ['缺少维修所需备件'];
const deviceWidth = Dimensions.get('window').width;
class SendBackAndStop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      description: '',
      itemCkIndex: null,
    };
  }

  _showAlert = (code) => {
    const title = code === '05' ? '退回' : '暂存待办';
    Alert.alert(
      '提示',
      `是否${title}`,
      [
        {
          text: '否',
          style: 'cancel',
          onPress: () => {
          },
        },
        {
          text: '是',
          onPress: () => {
            this._sendBack(code);
          },
        },
      ],
    );
  }

  _optionsItemClick = (description, itemCkIndex) => {
    this.setState({
      itemCkIndex,
      description,
    });
  }

  /**
   * 维修人员退回(before 2018.12.4 退回到待接受)
   * after 2018.12.4 退回到申报
  */
  _sendBack = async (code) => {
    try {
      let query = {
        failureId: this.props.id,
        stepCode: code, // 接口的步骤编码
        description: this.state.description,
      };
      query = Object.assign(query, this.props.mobileInfo);
      DeviceEventEmitter.emit('showLoading', true);
      const resp = await incidentServer.incidentHandle(query);
      DeviceEventEmitter.emit('showLoading', false);
      this._handleServerResponse(resp);
    } catch (error) {
      console.log('维修人退回异常:', error);
    }
  }

  _handleServerResponse = (resp) => {
    if (resp.resultCode == '0') { // 状态码成功
      UtilToast('退回成功', 'success');
      // Toast.show({
      //   type: 'success',
      //   text: '退回成功',
      //   duration: 1000,
      //   position: 'bottom',
      // });
    } else {
      UtilToast(resp.resultMsg || '退回失败，请重试', 'danger');
      // Toast.show({
      //   type: 'danger',
      //   text: resp.resultMsg || '退回失败，请重试',
      //   duration: 1000,
      //   position: 'bottom',
      // });
    }
    this.props.back();
  }

  render() {
    return (
      <View style={styles.conatiner}>
        <View>
          <Text style={[styles.leftContent, styles.textFont]}>处理意见</Text>
          <Textarea
            rowSpan={6}
            bordered
            style={[styles.textAreaStyle]}
            placeholder="请输入处理意见"
            value={this.state.description}
            onChangeText={(description) => this.setState({ description })}
          />
          <View style={styles.item}>
            <Option
              onClick={this._optionsItemClick}
              optionsList={optionsList}
              ckIndex={this.state.itemCkIndex}
            />
          </View>
        </View>
        <View>
          <Image
            source={require('../../../../../assets/images/btn-cut-line-xxx.png')}
            style={{ width: deviceWidth, height: 2, alignItems: 'center' }}
            resizeMode="stretch"
            resizeMethod="auto"
          />
          <View style={styles.oneItem}>
            <TouchableNativeFeedback
              onPress={() => this._showAlert('05')}
            >
              <View
                style={[styles.leftContentBtn, styles.back]}
              >
                <Text style={styles.submitBtn}>退回</Text>
              </View>
            </TouchableNativeFeedback>
            <TouchableNativeFeedback
              onPress={() => this._showAlert('10')}
            >
              <View
                style={[styles.rightContentBtn, styles.close]}
              >
                <Text style={styles.submitBtn}>暂存待办</Text>
              </View>
            </TouchableNativeFeedback>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  conatiner: {
    backgroundColor: Theme.myPrimary,
    display: 'flex',
    flex: 1,
    color: '#ffffff',
    justifyContent: 'space-between',
  },
  textFont: {
    color: '#ffffff',
  },
  oneItem: {
    display: 'flex',
    flexDirection: 'row',
    paddingTop: 5,
    paddingBottom: 5,
  },
  item: {
    display: 'flex',
    flexDirection: 'row',
    paddingTop: 5,
    paddingBottom: 5,
    marginTop: 8,
  },
  leftContent: {
    paddingLeft: 20,
    width: '35%',
  },
  rightContent: {
    paddingRight: 20,
    width: '65%',
  },
  leftContentBtn: {
    flex: 0.5,
  },
  rightContentBtn: {
    flex: 0.5,
  },
  textAreaStyle: {
    borderColor: '#ffffff',
    backgroundColor: '#ffffff',
    marginLeft: 20,
    marginRight: 20,
    borderRadius: 8,
  },
  submitBtn: {
    textAlign: 'center',
    color: '#ffffff',
    paddingTop: 8,
    paddingBottom: 8,
  },
  back: {
    backgroundColor: Theme.myPrimary,
  },
  close: {
    backgroundColor: Theme.myPrimary,
  },
});

export default SendBackAndStop;
